<template>
    <!-- 商品推荐 -->
    <div class="goods-block">
        <van-cell title="商品推荐" icon="gift-o"></van-cell>
        <van-row type="flex" justify="center">
            <van-col span="7" class="goods-item" v-for="(item,i) in recommendedItems" :key="i"
                @click="onDetail(item.product_id)">
                <!-- 图片 -->
                <van-image :src="APIDomainName + item.pic"></van-image>
                <!-- 商品名 -->
                <div class="van-ellipsis">{{item.title}}</div>
                <!-- 单价 -->
                <div class="price">￥{{item.price.toFixed(2)}}</div>
            </van-col>
        </van-row>
    </div>
</template>
 
<script>
    export default {                
        props: { //用props接收父组件传递的参数
            recommendedItems: Array,            
        },
        methods: {
            onDetail(id) {
                this.$router.push(`/product/detail/${id}`);
            }
        }
    }
</script>
<style scoped>
    .goods-block {
        background-color: #f0f1f4;
    }
    .van-cell {
        font-size: 16px;
        background-color: #e0e2e5;
    }
 
    .goods-item {
        display: flex;
        flex-direction: column;
        background-color: #fafcff;
        margin: 5px;
        padding: 5px;
        border-radius: 10px;
        font-size: 14px;
    }
 
    .price {
        font-size: 18px;
        font-weight: bold;
        color: red;
        text-align: right;
    }
</style>